<template>
    <div class="zs-card-sm zs-space-bottom zs-layout-flex-row zs-layout-justify-between">
        <span>
            <!-- 更改日历前的图标 -->
            <!-- <el-date-picker class="zs-select-md zs-space-right-sm" v-model="yearmonth" type="month" placeholder="年月"
                value-format="YYYY-MM" :clearable="false" :prefix-icon="customPrefix" /> -->
            <el-select v-if="isTwoControl == 2" @change="getProject" v-model="region" class="zs-select-md zs-space-right-sm"
                placeholder="区域" :clearable="false">
                <el-option v-for="item in regionList" :key="item.projectCode" :label="item.projectName"
                    :value="item.projectCode" />
            </el-select>
            <el-select v-if="isTwoControl == 2" v-model="projectCode" class="zs-select-md zs-space-right-sm"
                placeholder="项目" :clearable="false">
                <el-option v-for="item in projectList" :key="item.projectCode" :label="item.projectName"
                    :value="item.projectCode" />
            </el-select>
            <el-date-picker class="zs-select-md zs-space-right-sm" v-model="yearmonth" type="month" placeholder="年月"
                value-format="YYYY-MM" :clearable="false" />
            <el-button class="zs-btn-plain" @click="getTableData"> 查询 </el-button>
        </span>
        <span>
            <el-button class="zs-btn-md" :class="{ 'zs-btn-primary': isTwoControl == 1, 'zs-btn-info': isTwoControl != 1 }"
                @click="changeTab(1)">两算一控</el-button>
            <el-button class="zs-btn-md" :class="{ 'zs-btn-primary': isTwoControl == 2, 'zs-btn-info': isTwoControl != 2 }"
                @click="changeTab(2)">财务口径</el-button>
            <el-button class="zs-btn-plain" @click="handleDownload">
                <el-icon class="el-icon--left">
                    <Upload />
                </el-icon>导出
            </el-button>
        </span>
    </div>
</template>
<script setup>
import { downloadNewFile } from '@/utils/publicUtils';
import dbPublicApi from '@/api/dbPublic';
import { extOpsRegionApi, extOpsProjectApi, extOpsBudgetExportExcelApi, twoCalAndoneControlExportExcelApi } from '@/api/SpecialReport/twoControl';
// import { h } from 'vue'
import { ref } from 'vue'

const props = defineProps({
    // 右侧tab： 1 两算一控 2 财务口径
    tabType: {
        type: Number,
        required: false,
        default: 1
    },
})
const emit = defineEmits(["onChange", "onSearch"]);

const region = ref('')
const regionList = ref([])
const projectCode = ref('')
const projectList = ref([])
const yearmonth = ref('')
const isTwoControl = ref(props.tabType)

// const customPrefix = ({
//     render() {
//         return h('p', { class: ['zs-text-sm', 'zs-text-gray'] }, '截至')
//     },
// })

const changeTab = (value) => {
    isTwoControl.value = value
    emit("onChange", { data: value });
}

const getRegion = async () => {
    let res = {}
    res = await extOpsRegionApi()
    regionList.value = res.data.data
    region.value = res.data.data[0].projectCode
}

const getProject = async () => {
    let res = {}
    res = await extOpsProjectApi(region.value)
    projectList.value = res.data.data
    projectCode.value = res.data.data[0].projectCode
}

// 导出
const handleDownload = async () => {
    let res = {}
    let fileName = '';
    let fileData;
    if (isTwoControl.value == 1) {
        res = await twoCalAndoneControlExportExcelApi({ yearmonth: yearmonth.value })
        fileName = '外部运营-两算一控.xls'
    }

    // 财务口径
    if (isTwoControl.value == 2) {
        res = await extOpsBudgetExportExcelApi({ projectCode: projectCode.value, yearmonth: yearmonth.value })
        fileName = '外部运营-财务口径.xls'
    }

    fileData = res.data
    downloadNewFile(fileData, fileName);
}

function queryDataUpdateTime() {
    dbPublicApi.queryMonthsTimeApi().then(res => {
        let resData = res.data
        if (resData.code == 200) {
            yearmonth.value = resData.data
        }
    })
}

const getTableData = () => {
    emit("onSearch", { projectCode: projectCode.value, yearmonth: yearmonth.value });
}

const init = async () => {
    queryDataUpdateTime()
    await getRegion()
    await getProject()
    getTableData()
}
init()


</script>
  
<style scoped lang="scss"></style>
  